<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
		<title>HTML5建筑网站模板_777模板www.777moban.com</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
	    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	    <!--<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>-->
	    <link href="css/animate.css" rel="stylesheet" type="text/css" />
	    <script type="text/javascript" src="js/active.js"></script>
	    <script type="text/javascript" src="js/jquery.min.js"></script>
	    <!--strat-slider-->
	    <link rel="stylesheet" type="text/css" href="css/style2.css" />
		<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
		<!--//strat-slider-->
		<!-- FancyBox -->
		<!-- CSS -->
        <link rel="stylesheet" href="css/jquery.fancybox-buttons.css">
        <link rel="stylesheet" href="css/jquery.fancybox-thumbs.css">
        <link rel="stylesheet" href="css/jquery.fancybox.css">
		<!-- FancyBox -->
	</head>
	<body>
		<!--start-wrap-->
			<!--start-header-->
			<div class="header"> 
				<div class="wrap">
				<!--start-top-nav-->
				<div class="top-header animated bounceInDown">
					<!--start-logo-->
					<div class="logo">
						<a href="index.html"><img src="images/logo.png" title="Webworld" /></a>
					</div>
					<!--End-logo-->
					<!--start-top-nav-->
					<div class="top-nav" id="navigation">
						<ul>
							<li>
								<li><a href="index.html">Home</a></li>
								<li><a href="protfolio.html">Porfolio</a></li>
								<li><a href="contact.html">Contact</a></li>
								<div class="clear"> </div>
							</li>
						</ul>
					</div>
					<div class="clear"> </div>
					<!--//End-top-nav-->
				</div>
				<!--End-top-nav-->
				<!--start-da-slider-->
			<div id="da-slider" class="da-slider">
				<div class="da-slide">
					<h2>Clean,Flat & poloshed Design</h2>
					<p>Proin facilisis aliquam nunc quis varius</p>
					<a href="#" class="da-link">Show more</a>
				</div>
				<div class="da-slide">
					<h2>Clean,Flat & poloshed Design</h2>
					<p>Proin facilisis aliquam nunc quis varius</p>
					<a href="#" class="da-link">Show more</a>
				</div>
				<div class="da-slide">
					<h2>Clean,Flat & poloshed Design</h2>
					<p>Proin facilisis aliquam nunc quis varius</p>
					<a href="#" class="da-link">Show more</a>
				</div>
				<nav class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</nav>
			</div>
			<script type="text/javascript" src="js/jquery.min.js"></script>
			<script type="text/javascript" src="js/jquery.cslider.js"></script>
			<script type="text/javascript">
				$(function() {
				
					$('#da-slider').cslider({
						autoplay	: true,
						bgincrement	: 450
					});
				
				});
			</script>
				<!--//End-da-slider-->
			</div>
			<!--//End-header-->
		</div>
		<!--strat-content-->
		<div class="content">
			<div class="wrap">
			<!--start-welcome-note-->
			<div class="wellcome-note">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
			</div>
			<!--//End-welcome-note-->
			<!--start-top-grids-->
			<div class="top-grids">
				<div class="top-grid">
					<div class="top-grid-head">
						
					</div>
					<div class="top-grid-head-icon">
						<span> </span>
					</div>
					<h3>What We Are</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting.</p>
				</div>
				<div class="top-grid top-grid1">
					<div class="top-grid-head top-grid-head1">
						
					</div>
					<div class="top-grid-head-icon top-grid-head-icon1">
						<span> </span>
					</div>
					<h3>Start Our Project</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting.</p>
				</div>
				<div class="top-grid top-last-grid">
					<div class="top-grid-head top-grid-head3">
						
					</div>
					<div class="top-grid-head-icon top-grid-head-icon3">
						<span> </span>
					</div>
					<h3>Our Team</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting.</p>
				</div>
				<div class="clear"> </div>
			</div>
			<!--//End-top-grids-->
			<!--start-Features-->
			<div class="feature-grids">
				<div class="feature-grid-head">
					<div class="feature-grid-head-top">
						<label> </label><span> </span> <label> </label>
						<div class="clear"> </div>
					</div>
					<h3><span>Our</span> FEATURES</h3>
				</div>
					<div class="clear"> </div>
					<div class="feature-grid">
						<div class="feature-grid-left">
							<a href="#"><img src="images/fea1.png" alt="" /></a>	
						</div>
						<div class="feature-grid-right">
							<h4>Lorem Ipsum is simply !!</h4>
							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators . </p>
							<a class="btn" href="#">Read More</a>
						</div>
						<div class="clear"> </div>
					</div>
					<div class="clear"> </div>
					<div class="feature-grid feature-grid1">
						<div class="feature-grid-left feature-grid-right1">
							<a href="#"><img src="images/fea2.png" alt="" /></a>	
						</div>
						<div class="feature-grid-right feature-grid-left1">
							<h4>A Flat Camera</h4>
							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators . </p>
							<a class="btn" href="#">Read More</a>
						</div>
						<div class="clear"> </div>
					</div>
			</div>
			<!--End-Features-->
			<!--start-our-projects-->
			<div class="projects">
				<div class="feature-grid-head feature-grid-head1">
					<div class="feature-grid-head-top feature-grid-head-top1">
						<label> </label><span> </span> <label> </label>
						<div class="clear"> </div>
					</div>
					<h3><span>Our Latest</span> Projects</h3>
					<p class="proinfo">Lorem Ipsum is simply dummy text of the printing and typesetting.</p>
				</div>
				<div class="project-grids">
					<div class="project-grid">
						<div class="projects">
							<div class="project-grid1">
								<a class="fancybox" rel="group" href="images/project-pic1.jpg" title="PhotoGraphy">
									<img src="images/project-pic1.jpg" class="borderImage slickHoverZoom" alt="Night" />
								</a>
								<a class="project-name" href="#">Lorem Ipsum</a>
								<a class="project-tag" href="#">PhotoGraphy</a>
							</div>
							<div class="project-grid1">
								<a class="fancybox" rel="group" href="images/project-pic2.jpg" title="Print design">
									<img src="images/project-pic2.jpg" class="borderImage slickHoverZoom" alt="Night" />
								</a>
								<a class="project-name" href="#">Bonorum et Malorum</a>
								<a class="project-tag" href="#">Print design</a>
							</div>
							<div class="project-grid1">
								<a class="fancybox" rel="group" href="images/project-pic3.jpg" title="E-marketing">
									<img src="images/project-pic3.jpg" class="borderImage slickHoverZoom" alt="Night" />
								</a>
								<a class="project-name" href="#">Injected humour</a>
								<a class="project-tag" href="#">E-marketing</a>
							</div>
							<div class="project-grid1 last-project-grid1">
								<a class="fancybox" rel="group" href="images/project-pic4.jpg" title="Best market place">
									<img src="images/project-pic4.jpg" class="borderImage slickHoverZoom" alt="Night" />
								</a>
								<a class="project-name" href="#">Embarrassing</a>
								<a class="project-tag" href="#">Best market place</a>
							</div>
							<div class="clear"> </div>
						</div>
						<!---->
						<script src="js/jquery.fancybox.js"></script>
						<script src="js/jquery.fancybox-buttons.js"></script>
						<script src="js/jquery.fancybox-thumbs.js"></script>
				        <script src="js/jquery.easing-1.3.pack.js"></script>
						<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
				        <script type="text/javascript">
							$(document).ready(function() {
								$(".fancybox").fancybox();
							});
						</script>
						<!-->
						 <!--End-slider-->
					<!---->
					<script src="js/jquery.slickhover.js" type="text/javascript"></script>
					<script type="text/javascript">
						$(window).load(function(){
						  $(".slickHoverZoom").slickhover({icon:"images/zoom-white.png"});
						});
					</script>
					<!--//-->
					</div>
				</div>
			</div>
			<!--End-our-projects-->
			<div class="clear"> </div>
			<!--start-client-testmonials-->
			<div class="test-monials">
				<div class="feature-grid-head feature-grid-head2">
					<div class="feature-grid-head-top feature-grid-head-top3">
						<label> </label><span> </span> <label> </label>
						<div class="clear"> </div>
					</div>
					<h3><span>Client</span> Testimonials</h3>
				</div>
			</div>
			<div class="examples" id="textslider">
					<div class="slider">
						<div class="slider-mask-wrap">
							<div class="slider-mask">
								<ul class="slider-target">
									<li>
										<div class="inner">
											<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntsed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud !!</p>
										</div>
										<div class="test-auther">
											<span> </span>
											<p><a href="#">Robert Markel,</a><label>Company Name</label></p>
										</div>
									</li>
									<li>
										<div class="inner">
											<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor sed do eiusmod tempor incididuntincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud !!</p>
										</div>
										<div class="test-auther">
											<span> </span>
											<p><a href="#">Robert Markel,</a><label>Company Name</label></p>
										</div>
									</li>
									<li>
										<div class="inner">
											<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
										</div>
										<div class="test-auther">
											<span> </span>
											<p><a href="#">Robert Markel,</a><label>Company Name</label></p>
										</div>
									</li>
									<li>
										<div class="inner">
											<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
										</div>
										<div class="test-auther">
											<span> </span>
											<p><a href="#">Robert Markel,</a><label>Company Name</label></p>
										</div>
									</li>
									<li>
										<div class="inner">
											<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
										</div>
										<div class="test-auther">
											<span> </span>
											<p><a href="#">Robert Markel,</a><label>Company Name</label></p>
										</div>
									</li>
								</ul>
								<div class="clearit"> </div>
							</div>
						</div>
					</div>
				</div>
				<div>
					<ul id="selector">
						<li><a href="#" rel="frame_0"> </a></li>
						<li><a href="#" rel="frame_1"> </a></li>
						<li><a href="#" rel="frame_2"> </a></li>
						<li><a href="#" rel="frame_3"> </a></li>
					</ul>
				</div>
				</body>
				<script src="js/jquery-ui.min.js"></script>
				<script src="js/hammer.min.js"></script>
				<script src="js/responsiveCarousel.js"></script>
				<script>
				/* Okay, everything is loaded. Let's go! (on dom ready) */
				$(function () {
				    /* a generic product carousel - something that might appear in the body of a e-commerce site. */
				    $('#textslider')
				        .responsiveCarousel({
				            unitWidth:          'compute',
				            target:             '#textslider .slider-target',
				            unitElement:        '#textslider .slider-target > li',
				            mask:               '#textslider .slider-mask',
				            arrowLeft:          '#textslider .arrow-left',
				            arrowRight:         '#textslider .arrow-right',
				            dragEvents:         Modernizr.touch,
				            responsiveUnitSize:function () {
				                return 1;
				            },
				            step:-1,
				            onShift:function (i) {
				                var $current = $('#selector li a[rel=frame_' + i + ']');
				                $('#selector li a').removeClass('current');
				                $current.addClass('current');
				            }
				        });
				
				    /* this next part toggles the "auto slide show" option. */
				    $('#toggle-slide-show').on('click', function (ev) {
				        ev.preventDefault();
				        $('#textslider').responsiveCarousel('toggleSlideShow');
				    });
				
				    /* this lets us jump to a slide */
				    $('#selector a').on('click', function (ev) {
				        ev.preventDefault();
				        var i = /\d/.exec($(this).attr('rel'));
				        $('#textslider').responsiveCarousel('goToSlide', i);
				    });
				
				});
				$(window).on('load',function(){
				    $('.examples').responsiveCarousel('redraw');
				});
				</script>
			<!--//End-client-testmonials-->
			</div>
		</div>
		<!--End-content-->
		<!--strat-footer-->
		<div class="footer">
			<div class="wrap">
				<div class="footer-grid footer-grid1">
					<h4><a href="#"><img src="images/flogo.png" alt="" /></a></h4>
					<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage</p>
				</div>
				<div class="footer-grid footer-grid2">
					<h4>Contact</h4>
					<p>Randomised words which don't look even slightly believable. If you are going to use a passage</p>
					<ul>
						<li><span> </span> <label>New Delhi</label></li>
						<li><span> </span> <label>Info@yourwebsite.com</label></li>
						<li><span> </span> <label>890-09880-45590</label></li>
					</ul>
				</div>
				<div class="footer-grid footer-grid3">
					<h4>Latest Tweets</h4>
					<div class="recent-tweet">
						<div class="recent-tweet-icon">
							<span> </span>
						</div>
						<div class="recent-tweet-info">
							<p>Ds which don't look even slightly believable. If you are going to use a passage <a href="#"> 1 Hour Ago</a></p>
						</div>
						<div class="clear"> </div>
					</div>
					<div class="recent-tweet">
						<div class="recent-tweet-icon">
							<span> </span>
						</div>
						<div class="recent-tweet-info">
							<p>Ds which don't look even slightly believable. If you are going to use a passage <a href="#"> 1 Hour Ago</a></p>
						</div>
						<div class="clear"> </div>
					</div>
				</div>
				<div class="footer-grid footer-grid4">
					<h4>News Letter</h4>
					<p>Randomised words which don't look even slightly believable. If you are going to use a passage</p>
					<form>
						<input type="text" value="Email Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email Address';}">
						<input type="submit" value="Go" />
					</form>
				</div>
				<div class="clear"> </div>
			</div>
		</div>
		<!--End-footer-->
		<!--strat-copy-right-->
		<div class="copy-right">
			<div class="wrap">
				<div class="copy-right-left">
					<p>Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" href="http://www.777moban.com/">777模板</a></p>
				</div>
				<div class="copy-right-right">
					<ul>
						<li><a class="twitter" href="#"><span> </span></a></li>
						<li><a class="facebook" href="#"><span> </span></a></li>
						<li><a class="linkedin"  href="#"><span> </span></a></li>
					</ul>
				</div>
				<div class="clear"> </div>
			</div>
			</div>
		</div>
		<!--End-copy-right-->
		<!--End-wrap-->

</body>
</html>

